<template>
	<view class="container home-wrap" :style="{ 'background':'#F5F4F9',}">
		<shopro-navbar :isBack="true" :background="{'background':'#F5F4F9',}">
			<text slot="content" class="u-flex u-flex-center u-flex-items-center" style="color: #000; width: 90%; text-align: center; height: 100%;">我的记录</text>
		</shopro-navbar>
		<view v-if="watchRecords.length > 0">
			<view class="content-records" v-for="item in watchRecords" :key="item.id">
				<view class="quiz-record-title u-m-b-20">观看记录</view>
				<WatchRecordCard :record="item" @continue="onContinueWatch(item)" @showCatalog="onShowCatalog(item)" />
			</view>
			<!-- 做题记录 -->
			<view class="content-records" v-for="item in quizRecords" :key="item.id">
				<view class="quiz-record-title u-m-b-20">做题记录</view>
				<QuizRecordCard :record="item" @continue="onContinueQuiz(item)" />
			</view>
		</view>
		<view class="emptyrecord" v-else>暂无观看记录</view>
	</view>
</template>

<script>
import WatchRecordCard from "@/components/WatchRecordCard.vue";
import QuizRecordCard from "@/components/QuizRecordCard.vue";
import { record } from '@/api'
export default {
	components: {
		QuizRecordCard,
		WatchRecordCard
	},
	data() {
		return {
			watchRecords: [],
			quizRecords: [],
		};
	},
	onLoad() {
		this.getWatchList();
		// this.getCategoryUser();
	},
	methods: {
		getWatchList () {
			record.getWatchRecords().then((res) => {
				if (res.response.data.code == 1 && res.response.data.data) {
					this.watchRecords = res.response.data.data;
					console.log(this.watchRecords, 'getWatchList');
				}
			})
		},
		getCategoryUser () {
			record.getCategoryUser({
				category_id: ''
			}).then((res) => {
				if (res.response.data.code == 1 && res.response.data) {
					this.ordersList = res.response.data.data.data;
					console.log(res.response.data.data, 'getCategoryUser');
				}
			})
		},
		onContinueWatch(item) {
			uni.showToast({ title: '继续学习', icon: 'none' });
			uni.navigateTo({ url: '/pages/course/studyCourse?courseId=' + item.id });
		},
		onShowCatalog(item) {
			uni.showToast({ title: '课程目录', icon: 'none' });
			uni.navigateTo({ url: '/pages/course/detail?courseId=' + item.id });
		},
		onContinueQuiz(item) {
			uni.showToast({ title: '继续做题', icon: 'none' });
			// uni.navigateTo({ url: '/pages/quiz/continue?id=' + item.id });
		}
	},
};
</script>

<style lang="scss">
	.container {
		padding: 24rpx 0 0 0;
		background: #f7f7fa;
		min-height: 100vh;
	}

	.section {
		margin: 24rpx 24rpx 0 24rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
	}

	.card {
		background: #fff;
		border-radius: 24rpx;
		padding: 32rpx 24rpx 24rpx 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
	}

	.date {
		color: #bdbdbd;
		font-size: 26rpx;
		margin-bottom: 8rpx;
	}

	.desc {
		font-size: 30rpx;
		margin-bottom: 8rpx;
	}

	.bold {
		font-weight: bold;
	}

	.course,
	.quiz-info {
		color: #bdbdbd;
		font-size: 26rpx;
		margin-bottom: 16rpx;
	}

	.btn-group {
		display: flex;
		gap: 24rpx;
	}

	.btn-outline {
		border: 2rpx solid #2a7cff;
		color: #2a7cff;
		background: #fff;
		border-radius: 32rpx;
		padding: 12rpx 40rpx;
		font-size: 28rpx;
	}

	.btn-primary {
		background: #2a7cff;
		color: #fff;
		border: none;
		border-radius: 32rpx;
		padding: 12rpx 40rpx;
		font-size: 28rpx;
	}
	.content-records{
		background: #fff;
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
	}
	.emptyrecord{
		text-align: center;
		padding-top: 100rpx;
	}
</style>